// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
// 
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// 
//     http://www.apache.org/licenses/LICENSE-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@use './config';

.system {
  // .group {
  // }

  // .centerbody {
  // }

  .orbit {
    fill: none;
    stroke-width: 0.1;
    stroke-dasharray: 0.3 0.3;
    stroke: config.$color;
    stroke-opacity: 0.5;

    &.highlight {
      stroke: yellow;
      stroke-dasharray: none;
      stroke-width: 0.5;
      fill: white;
      fill-opacity: 0.2;
    }
  }

  .tail {
    fill: none;
    stroke-width: 0.3;
    stroke: config.$color;
    opacity: 0.8;
  }

  .subbody {
    &.highlight {
      stroke: yellow;
      stroke-width: 0.5;
    }

    &.planet {
      cursor: pointer;
    }

    &:hover {
      fill-opacity: 0.8;
    }
  }

  #ring {
    ellipse {
      cx: 3;
      cy: 1;
      rx: 2.9;
      ry: 0.9;
      stroke: white;
      stroke-width: 0.2;
      stroke-opacity: 0.5;
      fill: none;
    }
  }

  #detailPanel {
    user-select: none;
    font-size: 2.5px;
    font-family: 'Courier New', Courier, monospace;

    table {
      border-spacing: 0;

      td {
        padding: 0.5px;
        vertical-align: top;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style: none;

        .item {
          &.link {
            cursor: pointer;
            color: skyblue;
          }

          &:hover {
            color: yellow;
            text-decoration: underline;
            text-decoration-thickness: 0.2px;
          }
        }
      }
    }
  }

  #configPanel {
    user-select: none;
    font-family: 'Courier New', Courier, monospace;
    transform: scale(0.15);
    width: 100px;
    height: 160px;
    x: 0;
    y: 900px;

    .config {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      input[type='number'] {
        width: 40px;
        color: config.$color;
        background-color: #333;
      }

      // input[type='checkbox'] {
      //   background-color: #333;
      // }

      button {
        color: config.$color;
        background-color: #333;
      }
    }
  }

  #bg {
    display: none;
  }
}
